<template>
    <div class="hello" >
        <table border='1px' rules='all' cellpadding='10px ' class="table" >
            <tr>
                <td style="padding:0px;height:51px;margin: 0;border: 0px;" :colspan="arr.length">
                    <div  :style="{'--row':rownum*51+'px','--col':colnum*51+'px'}">
                        <div class="img">
                            <template v-if="nowNum!=-1">
                                {{nowNum}}
                            </template>
                        </div>
                    </div>
                </td>
            </tr>
            <tr v-for="(item,index) in arr" :key="index+'row'">
                <td v-for="(it,i) in item" :key="i+'col'" class="td" :class="{hjClass:it.isshow,bjClass:it.isbj}" @contextmenu.prevent="()=>{it.isbj=!it.isbj}">
                    <div v-show="it.isshow">
                        {{it.value}}
                    </div>
                </td>
            </tr>
            <tr>
                <td style="padding:0px;height:51px;margin: 0;border: 0px;" :colspan="arr.length">
                    
                </td>
            </tr>
        </table>
        
        <hr />
        <table style=" display: inline-table;">
            <tr>
                <td></td>
                <td class="key" @click="up" @keyup.up="up">上</td>
                <td></td>
            </tr>
            <tr>
                <td class="key" @click="left" @keyup.left="left" >左</td>
                <td class="key" @click="restart"> 重置</td>
                <td class="key" @click="right" @keyup.right="right" >右</td>
            </tr>
            <tr>
                <td></td>
                <td class="key" @click="down" @keyup.down="down" >下</td>
                <td></td>
            </tr>
            
            
        </table>
        <audio ref="moveMusic" hidden src="../../static/music/15373.wav"></audio>
        <audio ref="bjMusic" :autoplay="true" loop  src="../../static/music/y700.wav"></audio>
        <audio ref="boomMusic"  hidden src="../../static/music/15075.wav"></audio>
        <audio ref="victoryMusic"  hidden src="../../static/music/13102.wav"></audio>
    </div>
</template>

<script>
export default {
    name: "HelloWorld",
    data() {
        return {
            arr:[],
            rownum:0,
            colnum:0,
            start:[],
            startflag:false,
            time:0
        };
    },
    created(){
        this.arr=this.num()
    },
  
    computed:{
        nowNum:function(){
            let nownum=-1
            //游戏胜利
            if(this.rownum==this.arr.length+1){
                this.playMusic("victoryMusic")
                setTimeout(()=>{
                    alert("恭喜您穿过雷区,用时"+(new Date().getTime()-this.time)/1000+"s")
                    this.restart()
                },300)
                return -1
            }
            if(this.rownum>0){
                nownum=this.arr[this.rownum-1][this.colnum].value
                this.arr[this.rownum-1][this.colnum].isshow=true
            }
            if(this.rownum==0){
                nownum=this.start[this.colnum].value
                this.start[this.colnum].isshow=true
            }
            //游戏失败
            if(nownum==9){
                this.playMusic("boomMusic")
                setTimeout(()=>{
                    alert("您不幸牺牲了")
                    this.restart()
                },300)
                return '雷'
            }
            return nownum
        }
    },
    watch:{
        rownum:function(){
            this.startflag=true
        },
        colnum:function(){
            this.startflag=true
        },
        startflag:function(val,oldval){
            if(val){
                this.time=new Date().getTime()
                this.$refs.bjMusic.currentTime=0
                this.$refs.bjMusic.play()
            }else{
                this.$refs.bjMusic.currentTime=0
                this.$refs.bjMusic.pause()

            }
        }
    },
    mounted(){
        document.addEventListener("keyup",this.ifkey)
    },
    methods:{
        ifkey:function(e){
            let key=window.event?e.keyCode:e.which
            if(key==37||key==65){
                this.left()
            }   
            if(key==38||key==87){
                this.up()
            }   
            if(key==39||key==68){
                this.right()
            }   
            if(key==40||key==83){
                this.down()
            }   
        },
        restart:function(){
            this.startflag=false
            this.rownum=0
            this.colnum=0
            this.arr=this.num();
        },
        up:function(){
            if(this.rownum!=0&&(this.rownum-2<=0||!(this.arr[this.rownum-2][this.colnum].isbj))){
                this.rownum--
                this.playMusic("moveMusic")
            }
        },
        left:function(){
            if(this.colnum!=0&&(this.rownum-1<0||!(this.arr[this.rownum-1][this.colnum-1].isbj))){
                this.colnum--
                this.playMusic("moveMusic")
            }
        },
        right:function(){
            if(this.colnum<this.arr[0].length-1&&(this.rownum-1<0||!(this.arr[this.rownum-1][this.colnum+1].isbj))){
                this.colnum++
                this.playMusic("moveMusic")
            }
        },
        down:function(){
            if(this.rownum==this.arr.length||!(this.arr[this.rownum][this.colnum].isbj)){
                this.rownum++
                this.playMusic("moveMusic")
            }
        },
        playMusic:function(name){
            this.$refs[name].currentTime=0
            this.$refs[name].play()
            
        },
        initarr:function() {
            let arr = new Array(12);
            for (let i = 0; i < 12; i++) {
                arr[i] = new Array(12);
                for (let j = 0; j < 12; j++) {
                    arr[i][j] = 0;
                }
            }
            return arr;
        },
        rangemine:function () {
            let arr = this.initarr();

            for (let index = 0; index < 20; index++) {
                while (true) {
                    let row = Math.floor(Math.random() * 10) + 1;
                    let col = Math.floor(Math.random() * 10) + 1;
                    if (arr[row][col] != 9) {
                        arr[row][col] = 9;
                        break;
                    }
                }
            }
            return arr;
        },
        //生成每块所对应的数字
        num:function() {
            let arr = this.rangemine();

            for (let i = 1; i < 11; i++) {
                for (let j = 1; j < 11; j++) {
                    if (arr[i][j] >= 9) {
                        arr[i][j + 1] += 1;
                        arr[i][j - 1] += 1;
                        arr[i - 1][j] += 1;
                        arr[i + 1][j] += 1;
                        arr[i - 1][j + 1] += 1;
                        arr[i - 1][j - 1] += 1;
                        arr[i + 1][j - 1] += 1;
                        arr[i + 1][j + 1] += 1;

                    }
                }
            }
            for (let i = 1; i < 11; i++) {
                for (let j = 1; j < 11; j++) {
                    if (arr[i][j] > 8) {
                        arr[i][j] = 9;
                    }
                }
            }
            let nums=new Array(10)
            for(let i = 1; i < 11; i++){
                nums[i-1]=new Array(10)
                for (let j = 1; j < 11; j++) {
                    nums[i-1][j-1]={value:arr[i][j],isshow:false,isbj:false}
                }
            }
            
            this.start=new Array(10)
            
            for (let j = 1; j < 11; j++) {
                this.start[j-1]={value:arr[0][j],isshow:false}
            }
            
            
            return nums;

        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.td{
    width: 30px;
    height: 30px;
}
.hello{
    text-align: center;
}
.table{
    display: inline-table;
    position: relative;
}
.img{
    width: 51px;
    height: 51px;
    position: absolute;
    left: var(--col);
    top: var(--row);
    background: #000;
    color:#fff;

    transition:all 0.3s;
	transition-timing-function:ease;

    font-size: 30px;
    line-height: 50px;
}
.key{
    border: 1px solid #000;
    border-radius: 2px;
    width: 50px;
    height: 50px;
    cursor: pointer;

    
}
.hjClass{
    background: #eee;
}
.bjClass{
    background:red;
}
</style>
